<template>
  <div class="wrapper" ref="comingMovie" v-infinite-scroll="getUpdateData" infinite-scroll-delay="300"
       @scroll="getScrollTop">
    <div class="banner-wrap">
      <h5 class="title">近期最受欢迎</h5>
      <ul class="banner-content" ref="banner" @scroll="getScrollLeft">
        <li v-for="pop in popularMovie.coming" :key="pop.id" @click.stop="skipDetails(pop)">
          <p class="mask">&#xe82a;</p>
          <img :src="replaceSrc(pop.img)" alt="">
          <span class="movie-title">{{ pop.nm }}</span>
          <span class="peopleNumber">{{ pop.wish }}人想看</span>
          <span class="date">{{ getDate(new Date(pop.pubDate)) }}</span>
        </li>
      </ul>
    </div>
    <div class="bgc"></div>
    <div class="content">
      <h5 class="date">5月7日 周六</h5>
      <ul class="comingMovie">
        <li v-for="com in comingMovie.coming" :key="com.id" @click.stop="skipDetails(com)">
          <img :src="replaceSrc(com.img)" alt="">
          <div>
            <div>
              <h5>{{ com.nm }} </h5>
              <p>{{ com.wish }}<span>人想看</span></p>
            </div>
            <p>{{ com.cat }}</p>
            <p>{{ com.desc }}</p>
            <p>{{ com.pubDesc }}</p>
            <span class="loveBtn">&#xe82a; 想看</span>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'


  export default {
    name: "WaitingMovie",
    components: {},
    computed: {
      ...mapState('popularMovie', ['popularMovieList', 'comingMovieList']),
      ...mapState('movieDetails', ['actors', 'moviePhotos', 'comments', 'movieMessage']),
    },
    data() {
      return {
        limit: 30,
        currentPage: 0,
        ci: 20,
        popularMovie: {}, //近期最受欢迎
        scrollLeft: 0,
        comingMovie: {}, //待映
        scrollTop: 0,
      }
    },
    activated() {
      this.$refs.banner.scrollLeft = this.scrollLeft //最近受欢迎保留滚动位置
      this.$refs.comingMovie.scrollTop = this.scrollTop //待映保留滚动位置
    },
    async mounted() {
      //近期最受欢迎
      await this.getPopularMovies({ci: this.ci, limit: this.limit, currentPage: this.currentPage})
      this.popularMovie = this.popularMovieList //最受欢迎电影
      //待映
      await this.getComingMovie({ci: this.ci, limit: this.limit})
      this.comingMovie = this.comingMovieList //待映
    },
    methods: {
      ...mapActions('popularMovie', ['getPopularMovies', 'getComingMovie']),
      ...mapActions('movieDetails', ['getActors', 'getMoviePhoto', 'getComments', 'getMovieMessage']),
      getDate(date) { //获取日期
        return `${date.getMonth() + 1}月${date.getDate()}日`
      },
      replaceSrc(src) {
        src = src.replace('/w.h', '')
        return src
      },
      getScrollLeft: (function (waitTime) { //最受欢迎保留滚动条
        let beforeChangeTime = 0
        return function () {
          let afterChangeTime = Date.now()
          if (afterChangeTime - beforeChangeTime > waitTime) {
            beforeChangeTime = afterChangeTime
            this.scrollLeft = this.$refs.banner.scrollLeft //记录滚动距离
          }
        }
      })(200),
      async getUpdateData() { //滚动底部添加数据
        // await this.getComingMovie({ci: this.ci,  limit: this.limit})
        // this.comingMovieList.coming.forEach(item => this.comingMovie.coming.push(item))
      },
      getScrollTop: (function (waitTime) { //节流代码,记录滚动距离
        let beforeChangeTime = 0
        return function () {
          let afterChangeTime = Date.now()
          if (afterChangeTime - beforeChangeTime > waitTime) {
            beforeChangeTime = afterChangeTime
            this.scrollTop = this.$refs.comingMovie.scrollTop //记录滚动距离
          }
        }
      })(100),
      async skipDetails(data) { //跳转详情页
        await this.getActors(data.id)
        await this.getMoviePhoto(data.id)
        localStorage.setItem('actors', JSON.stringify(this.actors)) //利用localStorage将演员存储在浏览器中
        localStorage.setItem('moviePhotos', JSON.stringify(this.moviePhotos))//利用localStorage将剧照存储在浏览器中
        await this.getComments({id: data.id, limit: 10, currentPage: 0})
        localStorage.setItem('comments', JSON.stringify(this.comments)) //存储评论
        await this.getMovieMessage({id: data.id, ci: this.ci})
        localStorage.setItem('movieMessage', JSON.stringify(this.movieMessage))
        this.$router.push('/movie-details')
      }
    },

  }
</script>

<style lang="scss" scoped>
  @import '../../assets/scss/variable.scss';
  @import '../../assets/scss/mixin.scss';

  @font-face {
    font-family: 'iconfont';
    src: url('../../assets/icons/iconfont.eot');
    src: url('../../assets/icons/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../../assets/icons/iconfont.woff2') format('woff2'),
    url('../../assets/icons/iconfont.woff') format('woff'),
    url('../../assets/icons/iconfont.ttf') format('truetype'),
    url('../../assets/icons/iconfont.svg#iconfont') format('svg');
  }

  div.wrapper {
    flex: 1;
    display: flex;
    overflow-y: scroll;
    flex-direction: column;

    div.bgc {
      height: 0.11rem;
      background-color: #999;
      opacity: .3;
      width: 100%;
      @include border-bottom-1px();
      @include border-top-1px()
    }

    div.banner-wrap {
      width: 100%;
      height: 2.285rem;
      box-sizing: border-box;
      padding-left: 0.15rem;

      .title {
        font-size: 0.12rem;
        font-weight: normal;
        line-height: 0.4rem;
      }

      .banner-content {
        display: flex;
        overflow-x: scroll;

        > li {
          width: 0.85rem;
          height: 100%;
          margin-right: 0.1rem;
          font-size: 0.12rem;
          display: flex;
          flex-direction: column;
          position: relative;
          @include icon();

          .mask {
            width: 0.3rem;
            height: 0.3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom-right-radius: 0.05rem;
            background-color: rgba(0, 0, 0, .5);
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
          }


          img {
            width: 0.85rem;
            height: 1.15rem;
          }

          span {
            white-space: nowrap;
            width: 0.85rem;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .movie-title {
            color: $font-black-color;
            line-height: 0.2rem;
          }

          .peopleNumber, .date {
            color: $font-primary-color;
          }
        }
      }
    }


    div.content {
      flex: 1;
      //height: 72%;
      margin-top: 0.3rem;
      height: 50%;

      > h5 {
        margin-left: 0.12rem;
      }

      ul.comingMovie {
        overflow-y: scroll;
        margin-left: 0.12rem;

        > li {
          height: 1.15rem;
          display: flex;
          padding: 0.12rem 0.12rem 0.12rem 0;
          @include border-bottom-1px;
          position: relative;

          > img {
            width: 0.64rem;
            height: 0.9rem;
            margin-right: 0.11rem;
          }

          > div {
            flex: 1;

            > div {
              display: flex;
              width: 100%;
              justify-content: space-between;
              position: relative;

              > h5 {
                font-weight: normal;
                color: $font-black-color;
                font-size: 0.16rem;
                margin-right: 0.1rem;
                display: flex;
                line-height: 0.25rem;

                span {
                  width: 0.48rem;
                  padding-right: 0.08rem;
                  height: 0.14rem;
                  border: 0.01rem solid #8bb7ce;
                  color: #8bb7ce;
                  border-radius: 0.04rem;
                  font-size: 0.12rem;
                  line-height: 0.14rem;
                  margin-left: 0.05rem;
                  margin-top: 0.05rem;


                  i {
                    font-style: normal;
                    width: 0.16rem;
                    background-color: #8bb7ce;
                    color: #fff;
                    margin-right: 0.04rem;
                    border-bottom-left-radius: 0.04rem;
                    border-top-left-radius: 0.04rem;
                  }
                }
              }

              > p {
                font-size: 0.16rem;
                color: #ffb400;

                > span {
                  font-size: 0.12rem;
                }
              }
            }

            > p {
              font-size: 0.14rem;
              color: #666;
              line-height: 0.21rem;
              width: 2rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              &:last-child {
                color: $font-primary-color;
              }
            }

            .loveBtn {
              color: #ef4238;
              width: 0.64rem;
              height: 0.29rem;
              border-radius: 0.05rem;
              position: absolute;
              border: 0.01rem solid #ef4238;
              line-height: 0.29rem;
              text-align: center;
              bottom: 0.3rem;
              right: 0.12rem;
              @include icon()
            }
          }
        }
      }
    }
  }


</style>